<template>
  <el-main>
    <el-form :inline="true" :model="queryData" class="demo-form-inline">
      <el-form-item label="租客姓名">
        <el-input v-model="queryData.tenantName" placeholder="请输入租客姓名"></el-input>
      </el-form-item>
      <el-form-item label="房源类型">
        <el-select v-model="queryData.signType" placeholder="请选择">
          <el-option label="整租（分散式）" value="0"></el-option>
          <el-option label="合租（分散式）" value="1"></el-option>
          <el-option label="单身公寓（集中式）" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="手机号码">
        <el-input v-model="queryData.tenantPhone" placeholder="请输入手机号码"></el-input>
      </el-form-item>
      <br/>
      <el-form-item label="小区名称">
        <el-input v-model="queryData.premiseName" placeholder="请输入小区名称"></el-input>
      </el-form-item>
      <el-form-item label="起租日期">
        <el-date-picker
          v-model="queryData.startDate"
          value-format="yyyy-MM-dd"
          type="date"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="warning" @click="onSubmit">查询</el-button>
        <el-button type="warning" @click="onClear" plain>清空</el-button>
      </el-form-item>
    </el-form>


    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="tenantName"
        label="租客姓名">
      </el-table-column>
      <el-table-column
        prop="cfContractNo"
        label="租客合同编号">
      </el-table-column>
      <el-table-column
        prop="tenantPhone"
        label="电话">
      </el-table-column>
      <el-table-column
        prop="houseName"
        label="房源信息">
      </el-table-column>
      <el-table-column
        label="起租日期">
        <template slot-scope="scope">
            <span v-if="scope.row.startDate!= null">
              {{ parseTime(scope.row.startDate, "{y}/{m}/{d}") }}
            </span>
        </template>
      </el-table-column>
      <el-table-column
        label="结束日期">
        <template slot-scope="scope">
            <span v-if="scope.row.endDate!= null">
              {{ parseTime(scope.row.endDate, "{y}/{m}/{d}") }}
            </span>
        </template>
      </el-table-column>
      <el-table-column
        label="押付方式">
        <template slot-scope="scope">
            <span v-if="scope.row.depositType!= null && scope.row.paymentType!=null">
              {{ "押" + scope.row.depositType + "付" + scope.row.paymentType }}
            </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="deposit"
        label="押金">
      </el-table-column>
      <el-table-column
        prop="monthRent"
        label="租金">
      </el-table-column>
      <el-table-column
        prop="contractState"
        label="状态">
        <template slot-scope="scope">
            <span style="color: red">
              {{ scope.row.contractState == '1' ? '草稿' : scope.row.contractState == '2' ? '已提交' : scope.row.contractState == '3' ? '已解约' : scope.row.contractState == '4' ? '已结束' : '作废' }}
           </span>
        </template>
      </el-table-column>
    </el-table>


    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="this.queryData.pageNum"
      :page-sizes="[1, 2, 3, 4]"
      :page-size="this.queryData.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="this.total">
    </el-pagination>
  </el-main>
</template>

<script>


import {searchTenantManageList} from "@/api/housing/tenant";

export default {
  name: "index",
  data() {
    return {
      tableData: [],
      queryData: {
        pageNum: 1,
        pageSize: 3,
        tenantName: undefined,
        tenantPhone: undefined,
        premiseName: undefined,
        startDate: undefined,
        signType: undefined
      },
      rangeDate: undefined,
      total: 0

    };
  },
  methods: {
    //清空
    onClear() {
      this.queryData.tenantName = undefined;
      this.queryData.tenantPhone = undefined;
      this.queryData.premiseName = undefined;
      this.queryData.startDate = undefined;
      this.queryData.signType = undefined;
    },
    //查询
    onSubmit() {
      console.log("时间:", this.rangeDate);
      if (this.rangeDate != undefined) {
        this.queryData.startDate = this.rangeDate[0];
        this.queryData.endDate = this.rangeDate[1];
      }
      console.log("查询数据:", this.queryData);
      this.list();
    },
    //分页
    handleSizeChange(pageSize) {
      console.log(`每页 ${pageSize} 条`);
      this.queryData.pageSize = pageSize;
      this.queryData.pageNum = 1;
      this.list();
    },
    handleCurrentChange(pageNum) {
      console.log(`当前页: ${pageNum}`);
      this.queryData.pageNum = pageNum;
      this.list();
    },
    list() {
      searchTenantManageList(this.queryData).then(res => {
        console.log("租客管理数据:", res);
        this.tableData = res.data.records;
        this.total = res.data.total;
      })
    }
  },
  created() {
    this.list();
  }
}
</script>

<style scoped>
.el-pagination {
  text-align: right;
}
</style>
